<template>
    <div class="ph-color-predef">
        <button class="ph-predef-item" 
        @click="onClick(pc)"
        v-for="pc in precolors" :key="pc" :style="{backgroundColor:pc,borderColor:pc}"></button>
    </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
    props:{
        precolors:{type:Array as PropType<Array<string>>}
    },
    setup(props,{emit}) {
        const onClick = (c:string)=>{
            emit("pick",c)
        }
        return {onClick}
    },
})
</script>
<style lang="scss" scoped>
@import '../../assets/scss/predef.scss';
.ph-color-predef{
    max-height: 1.1718rem;
    min-height: 0.4921rem;
    border-top: 1px solid var(--ph-bd-light);
    display: flex;
    flex-wrap: wrap;
    padding: var(--ph-15);
    display: grid;
    grid-template-columns: repeat(8,var(--ph-15));
    grid-gap: var(--ph-15) var(--ph-15);
    justify-content: center;
    // justify-content: center;
    // align-items: center;
    overflow: auto;
    .ph-predef-item{
        @include button();
        width: var(--ph-15);
        height: var(--ph-15);
        cursor: pointer;
        flex: 0 0 auto;
        padding: 0;
        // margin: 0.0984rem 0.45rem;
        position:relative;
        border-radius: 3px;
        &:before,
        &:after{
            content:"";
            position: absolute;
            right:0;
            top:0;
            background-color: inherit;
            transition: all .3s ease;
            backface-visibility: hidden;
            transform: translate(0,0);
            visibility: hidden;
        }
        &:before{
            opacity: .5;
            width: .1171rem;
            height: .1171rem;
        }
        &:after{
            opacity: .7;
            width: .1406rem;
            height: .1406rem;
        }
        &:hover:before{
            transform: translate(.0465rem, -.0465rem);
            visibility: visible;
        }
        &:hover:after{
            transform: translate(0.0270rem, -0.0270rem);
            visibility: visible;
        }
    }
}
</style>
